{% include 'header.html' %}
{% load keyvalue %}
<style>
	.container {
		padding: 2rem 0rem;
	}
	h4 {
		margin: 2rem 0rem 1rem;
	}
</style>
<h2>Manage Respondent</h2>
<hr>
<div class="row">
	<form class="form-group col-8" action="/survey/respondent" method="post" enctype="multipart/form-data">
		{% csrf_token %}
		<label>Import respondent (Format: First Name, Last Name, Email, Company, Position, Phone): </label>
		<div class="form-group">
		    <input type="file" name="file" id="file" style="width: 0; height: 0; display: none;" onchange="$('#file-button').html('Selected');">
		    <label class="btn btn-info mb-0" for="file" id="file-button" name="file-button">Select CSV File...</label>
			<button class="btn btn-primary" type="submit">Submit</button> 
		</div>
	</form>
	<form action="/survey/respondent" method="post">
		{% csrf_token %}
		<div class="col-12">
		<table class="table table-striped table-hover">
			<thead>
				<tr>
					<th scope="col">ID</th>
					<th scope="col">First Name</th>
					<th scope="col">Last Name</th>
					<th scope="col">Email</th>
					<th scope="col">Group Name</th>
					<th scope="col">Company</th>
					<th scope="col">Position</th>
					<th scope="col">Phone</th>
					<th scope="col">Finished surveys</th>
				</tr>
			</thead>
			<tbody>
				{% for id, r in respondentAll %}
				<tr>
					<td>
						<div class="custom-control custom-checkbox">
							<input type="checkbox" class="custom-control-input" name="target" id="target-{{ r.id }}" value="{{ r.id }}">
							<label class="custom-control-label" for="target-{{ r.id }}">{{ r.id }}</label>
						</div>
					</td>
					<td>{{ r.firstName }}</td>
					<td>{{ r.lastName }}</td>
					<td>{{ r.email }}</td>
					<td>{{ r.group.name }}</td>
					<td>{{ r.company }}</td>
					<td>{{ r.position }}</td>
					<td>{{ r.phone }}</td>
					<td>{{ count|keyvalue:id }}</td>
				</tr>
				{% endfor %}
			</tbody>
		</table>
		</div>
		<div class="input-group col-md-6">
			<div class="input-group-prepend">
				<span class="input-group-text">Add to group</span>
			</div>
			<input type="text" class="form-control" placeholder="Group name..." name="group-name" id="group-name">
			<div class="input-group-append">
				<button class="btn btn-primary" type="submit">Submit</button>  
			</div>
		</div>
	</form>
</div>
{% include 'footer.html' %}